<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width-devive-width">
	<title>豆哥</title>
	<link rel="stylesheet" href="">
</head>
<body>
<hr/>
	<button onclick="show1()">1</button>
	<button onclick="show2()">2</button>
	<button onclick="show3()">3</button>
	<button onclick="show4()">4</button>
	<button onclick="show5()">5</button>
	<button onclick="prev()">上一张</button>
	<button onclick="next()">下一张</button>
	<button onclick="suoXiao()">缩小</button>
	<button onclick="fangDa()">放大</button>
<hr/>
<img id="pic"src="1.jpg"/>


<script>
var i= 1;
var w=500;
function show1()
{
 i=1;
 pic.src="1.jpg";

}
function show2()
{
 i=2;	
 pic.src="2.jpg";

}
function show3()
{
 i=3;
 pic.src="3.jpg";
 }
function show4()
{
 i=4;
 pic.src="4.jpg";
 
}
function show5()
{
 i=5
 pic.src="5.jpg";

}
function suoXiao()
{
 w=w*0.9;
 pic.width=w;
}
function fangDa()
{
 w=w*1.1;
 pic.width=w;
}
function prev()
{
 i--;
 if(i==0)i=5;
 pic.src=i+".jpg";

 
}
function next()
{
 i++;
 if(i==6) i=1;
 pic.src=i+".jpg";
}
</script>
</body>
</html>

